<script setup lang="ts">
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { usePublicHooks, FormProps } from "@/views/hooks";
import { onMounted, ref } from "vue";
import { Config, getDictList } from "@/api/system";

const props = withDefaults(defineProps<FormProps<Config>>(), {
  formInline: () => ({
    id: "",
    key: "",
    value: "",
    desc: "",
    type: "",
    dict: "",
    state: true
  })
});
const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);
const useDict = ref<boolean>(false);
const options = ref<Array<any>>([]);
const disabled = !!newFormInline.value.id;

function getRef() {
  return ruleFormRef.value;
}

function changeDict(val: string) {
  useDict.value = !!val;
  newFormInline.value.dict = val;
  newFormInline.value.value = null;
}

function loadDictTop() {
  getDictList({ parentId: "0" }).then(data => {
    options.value = data;
  });
}

onMounted(() => {
  loadDictTop();
  useDict.value = !!newFormInline.value.dict;
});

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item v-if="!disabled" label="配置名称" prop="key">
          <el-input
            v-model="newFormInline.key"
            clearable
            placeholder="请输入配置名称"
          />
        </el-form-item>
        <el-form-item v-if="disabled" label="配置名称">
          <el-input
            v-model="newFormInline.key"
            clearable
            placeholder="请输入配置名称"
            :disabled="disabled"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="配置内容" prop="value">
          <el-input
            v-if="!useDict"
            v-model="newFormInline.value"
            clearable
            placeholder="请输入配置内容"
          />
          <DictOption
            v-if="useDict"
            v-model="newFormInline.value"
            :code="newFormInline.dict"
            type="select"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="配置类型" prop="type">
          <DictOption
            v-model="newFormInline.type"
            code="CONFIG_TYPE"
            type="radio"
            disabled
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="对应字典" prop="dict">
          <el-select-v2
            v-model="newFormInline.dict"
            :options="options"
            value-key="value"
            clearable
            placeholder="请选择对应字典"
            @change="changeDict"
          />
        </el-form-item>
      </re-col>
      <re-col>
        <el-form-item label="配置说明" prop="desc">
          <el-input
            v-model="newFormInline.desc"
            clearable
            placeholder="请输入配置说明"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="配置状态">
          <el-switch
            v-model="newFormInline.state"
            inline-prompt
            :active-value="true"
            :inactive-value="false"
            active-text="启用"
            inactive-text="停用"
            :style="switchStyle"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
